import { observer } from 'mobx-react'
import styles from './index.module.less'
import ScrollListView from '@/pages/archives/components/ScrollListView'
import { getDossiers } from './api'
import { history, useLocation } from 'umi'
import { useEffect, useState } from 'react'
import noData from '@/resource/no_data.png'
import BtnBotLayout from '@/components/BtnBotLayout'
import { toJS } from 'mobx'
import { Divider, Modal, ProgressBar } from 'antd-mobile'
import { InformationCircleOutline } from 'antd-mobile-icons'
import IconFont from '@/components/IconFont'

export default observer(() => {
    const { auth_token, send } = useLocation().query
    const [listData, setData] = useState<any>()

    const handleClick = (item: any) => {
        history.push({
            pathname: '/archivedetail',
            query: {
                id: item.id,
                auth_token,
            },
        })
    }

    const listItemRender = (data: any) => {
        return data.map((item: any, index: number) => {
            const { currentUserFinished, dossier_name } = item
            const dossierNameArr = dossier_name?.split(' ') || []

            return (
                <div className={styles.block} key={item.id}>
                    <div className={styles.row} onClick={() => handleClick(item)}>
                        <p className={styles.text}>
                            <span>{dossierNameArr[0]}</span>
                            <span>{dossierNameArr.slice(1).join(' ')}</span>
                        </p>
                        <IconFont className={[styles.icon, currentUserFinished ? styles.success : styles.unfinished].join(' ')} type={currentUserFinished ? 'icon-chenggong' : 'icon-weiwancheng'} />
                    </div>
                    {index + 1 !== listData?.count && <Divider style={{ marginTop: '4px', marginBottom: '3px' }} />}
                </div>
            )
        })
    }

    useEffect(() => {
        document.title = '求职档案'
        if (!!send) {
            history.goBack()
        }
    }, [])
    /** 讲师评语弹窗 */
    const teacherModal = (data: any[]) => {
        Modal.show({
            title: '评语',
            content: (
                <>
                    {data.map(item => (
                        <p key={item.teacher_uid} className={styles.teacher_modal}>
                            <span className={styles.teacher_name}>{item.teacher_name}：</span>
                            <span>{item.remark}</span>
                        </p>
                    ))}
                </>
            ),
            closeOnAction: true,
            actions: [
                {
                    key: 'konw',
                    text: '我知道了',
                },
            ],
        })
    }

    return (
        <div className={styles.archives}>
            <BtnBotLayout>
                <div className={styles.container}>
                    {auth_token === '' ? (
                        <div className={styles.no_data}>
                            <img src={noData} />
                            <div className={styles.no_data_text}>暂无数据</div>
                        </div>
                    ) : (
                        <ScrollListView
                            requestApi={getDossiers}
                            renderHeader={(data: any) => {
                                if (!Object.keys(data).length) {
                                    return <div />
                                }
                                if (!listData) {
                                    console.log(toJS(data))
                                    setData(data)
                                }
                                return (
                                    <div className={styles.header}>
                                        <p className={styles.header_name}>
                                            <span>求职档案</span>
                                            {data.score_remark.length > 0 && <InformationCircleOutline className={styles.header_icon} onClick={() => teacherModal(data.score_remark)} />}
                                        </p>
                                        <div className={styles.progress_box}>
                                            <ProgressBar
                                                percent={data.finished_rate}
                                                className={styles.progress}
                                                style={{ '--track-width': '8px', '--fill-color': '#fff', '--track-color': 'rgba(255,255,255,0.1)' }}
                                            />
                                            <p className={styles.number_box}>
                                                <span>{data.count - data.unfinished_count}/</span>
                                                <span>{data.count}</span>
                                            </p>
                                        </div>
                                    </div>
                                )
                            }}
                            render={listItemRender}
                        />
                    )}
                </div>
            </BtnBotLayout>
        </div>
    )
})
